<template>
    <div class="auth_box">
        <div class="menu_box">
            <el-menu default-active="1" class="el-menu-vertical-demo" >
                <el-menu-item index="1" @click="injectCom('RoleManager')">
                    <!-- <i class="el-icon-menu"></i> -->
                    <span slot="title">角色维护</span>
                </el-menu-item>
                <el-menu-item index="2" @click="injectCom('AuthManager')">
                    <!-- <i class="el-icon-menu"></i> -->
                    <span slot="title">权限维护</span>
                </el-menu-item>
                <el-menu-item index="3" @click="injectCom('UserManager')">
                    <!-- <i class="el-icon-menu"></i> -->
                    <span slot="title">用户维护</span>
                </el-menu-item>
                <el-menu-item index="4" @click="injectCom('AuthAssign')">
                    <!-- <i class="el-icon-menu"></i> -->
                    <span slot="title">权限分配</span>
                </el-menu-item>
                <el-menu-item index="5" @click="injectCom('RoleAssign')">
                    <span slot="title">角色分配</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content_box">
            <component v-bind:is="currentTabComponent"></component>
        </div>
    </div>
</template>
<script>
import RoleManager from '_c/global/roleManager.vue'
import AuthManager from '_c/global/authManager.vue'
import UserManager from '_c/global/userManager.vue'
import AuthAssign from '_c/global/authAssign.vue'
import RoleAssign from '_c/global/roleAssign.vue'
export default {
    components:{RoleManager,AuthManager,UserManager,AuthAssign,RoleAssign},
    data(){
        return {
            currentTabComponent:'RoleManager',
        }
    },
    methods:{
        injectCom(name){
            this.currentTabComponent = name;
        }
    }
}
</script>
<style scoped>
.auth_box{
    height: 100%;
    border:2px solid #f0f0f0;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
}
.menu_box{
    width:150px;
}
.content_box{
    width:900px;
    margin:0 auto;
    padding-top:20px;
}
</style>